<template>
	<view class="payDetails_container">
		<view class="pay_carlicense">{{ paydetailObj.carLicense }}</view>
		<view class="pay_details">
			<view class="pay_details_item">
				<text class="title">入场时间</text>
				<text style="font-family: PingFangSC-Regular, PingFang SC">{{
          paydetailObj.entTime
        }}</text>
			</view>
			<view class="pay_details_item">
				<text class="title">计费时长</text>
				<text>{{ paydetailObj.parkingTimeStr }}</text>
			</view>
			<view class="pay_details_item">
				<text class="title">订单金额</text>
				<text>￥{{ paydetailObj.amount }}</text>
			</view>
			<view class="pay_details_item" v-if="paydetailObj.payAmount > 0">
				<text class="title">已付金额</text>
				<text class="money">￥{{ paydetailObj.payAmount }}</text>
			</view>
			<view class="pay_details_item pay_detail_final">
				<text>应付金额</text>
				<text class="money">￥{{ paydetailObj.payableAmount }}</text>
			</view>
		</view>
		<!-- 如果金额是0并且，不存在优惠隐藏支付按钮 -->
		<block v-if=" paydetailObj.payableAmount>0">
			<button hover-class="button-hover" @click="toPay" class="pay_button button_common">
				去支付
			</button>
		</block>

	</view>
</template>

<script>
	import {
		getBillingDetailApi,
		payBillingApi
	} from "@/api/api";
	const app = getApp();
	export default {
		data() {
			return {
				paydetailObj: {},
				openid: "",
			};
		},
		onLoad(options) {
			console.log(options);
			this.getParkInfoFun(options.carLicense)
		},
		onShow() {

		},

		methods: {
			async getParkInfoFun(carLicense) {
				const result = await getBillingDetailApi({
					carLicense
				});
				this.paydetailObj = result.data;
			},
			async toPay() {
				const that = this;
				// 金额大于零时可以支付;
				if (that.paydetailObj.payableAmount > 0) {
					uni.showLoading({
						title: "加载中",
					});

					const params = {
						recordId: this.paydetailObj.recordId,
						payAmount: this.paydetailObj.payableAmount,
						payChannel: 'WECHAT_PAY',
						payScene: 'IN_PARKING_LOT'
					};

					const result = await payBillingApi(params);
					uni.hideLoading();
					if (result.code != 200) {
						uni.showToast({
							title: result.msg,
							icon: "none",
						});
						return;
					}
					uni.redirectTo({
						url: "/pages/success/success"
					});
				} else {
					// 金额为零时的处理
					uni.showToast({
						title: "该笔订单不需要支付",
						icon: "none",
					});
				}
			},
			cmbPayAction() {},
			toComplete() {
				// 完成支付，展示弹框
				this.$refs.popup.open();
			},
			closeModal() {
				// 关闭弹框
				// 如果场景时场内码时跳转至输入车牌号
				if (this.payScene == "IN_PARKING_LOT") {
					uni.redirectTo({
						url: `/pages/inquiryByUser/inquiryByUser`,
					});
				} else {
					this.$refs.popup.close();
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	.payDetails_container {
		padding: 56rpx 64rpx;
		// height: 100vh;
		background: url(../../static/images/pay-bg@2x.png) no-repeat;
		background-size: cover;
		background-position: center top;
		box-sizing: border-box;
		color: #242a37;

		.pay_carlicense {
			font-size: 64rpx;
			font-family: "myFont_Bold";
			color: #005dd6;
			line-height: 92rpx;
		}

		.pay_details {
			margin-top: 88rpx;
			background: white;
			font-size: 28rpx;

			line-height: 38rpx;
			margin-bottom: 290rpx;

			.pay_details_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 48rpx;

				.title {
					color: #777f8f;
				}

				.money {
					color: #ff3a50;
				}
			}

			.pay_detail_final {
				border-top: 2rpx solid #e3e3e3;
				padding-top: 50rpx;

				.money {
					font-size: 44rpx;
				}
			}
		}

		.button_common {
			width: 612rpx;
			height: 110rpx;
			line-height: 110rpx;
			letter-spacing: 1px;
			font-family: HarmonyOS_Sans_SC;
			margin-bottom: 40rpx;
			border-radius: 55rpx;
		}

		.pay_button {
			background: #007fff;
			box-shadow: 0px 20rpx 40rpx 0px rgba(0, 0, 0, 0.1),
				0px 24px 48px 0px rgba(45, 79, 162, 0.08);
			color: #fff;
		}

		.pr_button {
			background: #fff;
			color: #007fff;
			border: 1px solid #007fff;
			border-radius: 55rpx;
		}
	}

	.popup-content {
		width: 606rpx;
		height: 584rpx;
		background: #fff;
		border-radius: 8rpx;
		flex-direction: column;
		font-size: 36rpx;
		font-weight: 400;
		color: #222b45;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		padding-top: 64rpx;
		box-sizing: border-box;

		.mer_tips {
			height: 152rpx;
			width: 152rpx;
			margin-bottom: 58rpx;
		}

		.mer_pay_btn {
			display: flex;
			justify-items: center;
			margin-top: 102rpx;

			.btn {
				width: 248rpx;
				height: 80rpx;
				background: #edf1f7;
				border-radius: 8rpx;
				display: inline-block;
				font-size: 28rpx;
				color: #2e3a59;
				line-height: 80rpx;
			}

			.sure {
				color: #fff;
				background: #3366ff;
				margin-left: 14rpx;
			}
		}
	}

	.popup-content.phone-content {
		height: 480rpx;

		.title {
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.phone-input {
			width: 80%;
			height: 80rpx;
			border: 1px solid #777f8f;
			border-radius: 16rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		.mer_pay_btn {
			margin-top: 80rpx;
		}
	}

	.button-hover {
		opacity: 0.9;
	}
</style>
>
